<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/public.css" type="text/css">
    <link rel="stylesheet" href="css/productdetails.css">
    <link rel="stylesheet" href="css/index.1.css">
    <title>商品详情</title>
</head>
<body>
    <div class="header">
        <div class="header_all">
            <div class="header_left">
                <img src="image/index-1.png">
                <div class="header_left_h">
                    <h3>扫码下载寺库APP</h3>
                    <p>给你全世界的美好</p>
                </div>      
            </div>
            <div class="header_center"><a href="#"><img src="image/index-2.jpg" alt=""></a></div>
            <div class="header_right">
                <div class="header_right_top">
                    <p> <a href="login.html">请登录</a> <span>|</span> <a href="register.html">免费注册</a></p>
                    <p class="serve"><a href="#">客户服务<i></i></a></p>
                    <p id="serve_a">
                        <a href="#">在线客服</a>
                        <a href="#">养护中心</a>
                        <a href="#">帮助中心</a>
                        <a href="#">贵宾专线 : 400-78-56789</a>
                    </p>
                    <p class="meiti"><a href="#">媒体聚焦</a></p>
                </div>
                <div class="header_right_bottom">
                    <img src="image/index-3.jpg">
                    <a href="#">购物车</a>
                    <span>(0)</span>
                </div>
            </div>
        </div>
    </div>
    <div class="title">
        <div class="title_all">
                <a href="#">首页</a>
            <div id="container">  
                <a href="#">包袋</a>
                <a href="#">腕表</a>
                <a href="#">珠宝首饰</a>
                <a href="#">服装鞋靴</a>
                <a href="#">配饰</a>
                <a href="#">体育活动</a>
                <a href="#">家居生活</a>
                <a href="#">生活方式</a>
                <a href="#">母婴美妆</a>
                <a href="#">豪车频道</a>
               
                <div class="clear"></div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>1</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>2</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content" >
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>3</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>4</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>5</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>6</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>7</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>8</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>9</li>
                            </ul>
                        </div>
                    </div>
                    <div class="content">
                        <div class="tit"><h3>分类</h3><h3>品牌</h3></div>
                        <div class="con">
                            <ul>
                                <li>男士包袋</li>
                                <li>钱包</li>
                                <li>男士包袋</li>
                                <li>钱包</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>女生包袋</li>
                            </ul>
                            <ul>
                                <li>女生包袋</li>
                                <li>0</li>
                            </ul>
                        </div>
                    </div>                   
            </div>    
            <div class="ipt"> <input type="text" value="" placeholder="Roger Vivier" ></div>  
        </div>
    </div>
    <div class="title1">
        <div class="title1_all">
            <p>商品编码:33753171</p>
        </div>
    </div>
    <div class="product">
        <div class="product_all">
            <div class="product_left">
                <div class="imgdet wrap" id="imgdet_wrap">
                    <!-- 左侧图片列表 -->
                    <div class="imglist">
                        <ul>
                            <li class="active">
                                <!-- <img src="image/images/productdetail_17.jpg" alt=""> -->
                            </li>
                            <li>
                                <img src="image/images/productdetail_18.jpg" alt="">
                            </li>
                            <li>
                                <img src="image/images/productdetail_19.jpg" alt="">
                            </li>
                            <li>
                                <img src="image/images/productdetail_20.jpg" alt="">
                            </li>
                            <li>
                                <img src="image/images/productdetail_21.jpg" alt="">
                            </li>
                        </ul>
                    </div>
                    <div class="imgpart">
                         <!-- 图片展示 -- -->
                        <div class="pic">
                            <img src="image/images/productdetail_17.jpg" alt="">
                            <!-- 镜片  -->
                            <div class="magnify"></div>
                        </div>
                        <!-- 放大后的图片, 放大后的图片的尺寸要设置为展示图片的倍数（2倍 -->
                        <div class="bigpic">
                            <img src="image/images/productdetail_17.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="product_right">
                <p class="ti"></p>
                <div class="product_right_center">
                    <p class="price">一&nbsp;口&nbsp;价&nbsp;&emsp;￥<span class="spp"></span></p>
                    <p>发货地&emsp;&emsp;&emsp;<a href="#">大陆</a>有货&emsp;预计下单会在5-7天发货</p>
                    <p>温馨提示&emsp;&emsp;本商品无质量问题不支持退换货 </p>
                    <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;本商品为特例品,不支持优惠券和不参与会员折扣</p>
                    <P>商品信息&emsp;&emsp;<span>自营</span></P>
                </div>
                <p class="colo"><span>颜色</span>&emsp;&emsp;&emsp;&emsp;<img src="image/productdetails_1.jpg"></p>
                <p class="num">购买数量&emsp;&emsp;&emsp;&emsp;&emsp;仅剩 <span style="color:red">2</span> 件，抓紧时间购买哦！</p>
                <div class="product_right_low">
                    <img src="image/producttails_2.jpg">
                    <p><a href="#">立即抢购</a></p>
                    <p><a href="javascript:;" id="add-card"><img src="image/productdetails_shopping.jpg">加入购物车</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="introduce">
        <div class="introduce_all">
            <div class="introduce_left">
                <div class="introduce_left_title">大家都在买</div>
                <div class="introduce_left_content">
                    <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>
                    <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>
                    <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>
                    <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>
                    <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>

                </div>
                <div class="introduce_left_title">相关商品</div>
                <div class="introduce_left_content">
                        <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>
                        <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>
                        <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>
                        <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>
                        <p class="one"><img src="image/producedetail_0.jpg"><a href="#">BURBERRY/博柏利  格X羊毛丝<span>￥1,865</span></a></p>
    
                    </div>
            </div>
            <div class="introduce_right">
                <div class="instroduce_right_title">
                    <ul>
                        <li><a href="#">商品详情</a></li>
                        <li><a href="#">商品鉴定</a></li>
                        <li><a href="#">售后服务</a></li>
                        <li><a href="#">购买须知</a></li>
                        <li><a href="#">加入购物车</a></li>
                    </ul>
                </div>
                <div class="instroduce_right_content">
                    <div class="top">
                        <p class="p"><img src="image/productdetail_03.jpg" alt="" srcset="">
                            <span>100%正品,假一赔十</span><br>
                            <a href="#">寺库经营的商品均为正品，寺库经营的商品均为正品，寺库经营的商品均为正品，寺库经营的商品均为正品</a>
                        </p>
                        <p class="p1"><img src="image/productdetail_05.jpg" alt="" srcset="">
                            <span>100%正品,假一赔十</span><br>
                            <a href="#">寺库经营的商品均为正品，寺库经营的商品均为正品，寺库经营的商品均为正品，寺库经营的商品均为正品</a>
                        </p>
                    </div>
                    <div class="center">
                        <h3>商品参数</h3>
                        <table width="100%"  style="background:#f6f6f6;">
                            <colgroup span="3" align="left" ></colgroup>
                            <tr>
                                <td>上市年份季节：17年秋冬</td>
                                <td>上市年份季节：17年秋冬</td>
                                <td>上市年份季节：17年秋冬</td>
                                <td>上市年份季节：17年秋冬</td>
                            </tr>
                            <tr>
                                <td>产地：意大利、中国</td>
                                <td>产地：意大利、中国</td>
                                <td>产地：意大利、中国3</td>
                                <td>产地：意大利、中国</td>
                            </tr>
                            <tr>
                                <td>2产地：意大利、中国4</td>
                                <td>产地：意大利、中国</td>
                            </tr>
                        </table>
                    </div>
                    <div class="lows">
                        <h3>商品详情</h3>
                        <img src="image/productdetail_17.jpg" alt="">
                        <img src="image/productdetail_18.jpg" alt="">
                        <img src="image/productdetail_19.jpg" alt="">
                        <img src="image/productdetail_20.jpg" alt="">
                        <img src="image/productdetail_21.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="appraise">
        <div class="appraise_all">
            <div class="appraise_title">
                <p>该商品评价（0）</p>
                <p>同商品评价（1）</p>
            </div>
            <div class="appraise_content">
                <p><a href="#">全部(1)</a></p>
                <p><a href="#">有图评价(0)</a></p>
                <div class="appraise_bottom">
                    <img src="image/productdetail-app.jpg" alt="" draggable="false">
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
            <div class="bottom_top">
                <ul>
                    
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
                <ul>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
                <ul>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
                <ul>
                    <li><a href="#">诗库奢饰品养护</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                    <li><a href="#">新手指南</a></li>
                </ul>
        
               
            </div>
            <div class="bottom_bottom">
                <p><img src="image/ga.png"><a href="#">京公安备11010102001392</a></p>
                <p>京ICP证110119号&nbsp;京ICP备09084709号-3</p>
                <p><a href="#">IS09001中国质量管理体系认证</a></p>
                <p><a href="#">出版物经营许可证</a></p>
                <p><a href="#">食品经营许可证</a></p><br>
                <p>京B2-20181305</p>
                <p>京食药网食备201810026</p>
				<p>客服电话 : 400-875-6789</p>  
                <p>COPYRIGHT&COPY;2010-2017北京寺库商贸有限公司&nbsp;版却所有</p><br>
                <a href="#" class="low"><img src="image/1.jpg"></a>
                <a href="#" class="low"><img src="image/2.jpg"></a>
                <a href="#" class="low"><img src="image/3.jpg"></a>
                <a href="#" class="low"><img src="image/4.jpg"></a>
                <a href="#" class="low"><img src="image/5.jpg"></a>
            </div>
    </div>
</body>
</html>
<script src="js/cookie.js"></script>
<script src="public/public.js"></script>
<script src="js/ajax.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
    //表头
    var serve = document.querySelector(".serve");
    serve.onmouseover = function(){
        $id("serve_a").style.display = "block";
    }
    serve.onmouseout = function(){
        $id("serve_a").style.display = "none";
    }
</script>
<script type="text/javascript">
//页面结构分析 ： 保证标题的下标和内容的下标一一对应
    var bts = document.querySelectorAll("#container a");
    var cons = document.querySelectorAll("#container .content");
    
    for( let i = 0 ; i < bts.length ; i++){
        
        bts[i].onmousemove = function(){
            for( let j = 0 ; j < bts.length ; j++){
                cons[j].style.display = "none";
            }
            cons[i].style.display = "block";
        }
        bts[i].onmouseout = function(){
            cons[i].style.display = "none";
        }
    }
</script>

<script>
    var active = document.querySelector(".active");
    var oTi = document.querySelector(".ti");
    var oSpp = document.querySelector(".spp")
    //获取商品id
	//可以输出？下的内容
	console.log(location.search) //?aid=22
	//去掉？号
	var str = location.search.slice(1)  //aid=22
	console.log(str);
	
	var arr = str.split("&");
	for( var i = 0 ; i < arr.length ; i++){
		var str1 = arr[i];
		var arr1 = str1.split("=");
		if( arr1[0] = 'pid' ){
			console.log( arr1[1] )
			pid = arr1[1];
			console.log(pid)
		}
    }
    
    var url = `http://jx.xuzhixiang.top/ap/api/detail.php?id=${pid}`;
    ajax(url,function(res){
        //添加图片
         console.log(res.data) 
        var Img = document.createElement("img")
        Img.src = `${res.data.pimg}`;
        active.appendChild(Img);
        //添加标题
        var oSp = document.createElement("span")
        oSp.innerHTML = `${res.data.pname}`;
        oTi.appendChild(oSp);
        //添加价格
        var sSp = document.createElement("span");
        sSp.innerHTML = `${res.data.pprice}`;
        oSpp.appendChild(sSp);

        var uid= getCookie("uname");
		console.log(uid);
		var pnum = 0;
		$id("add-card").onclick = function(){
			//alert()
			pnum += 1;
			// http://jx.xuzhixiang.top/ap/api/add-product.php?uid=1&pid=1&pnum=1
            urll = `http://jx.xuzhixiang.top/ap/api/add-product.php?uid=${uid}&pid=${pid}&pnum=${pnum}`;
            console.log(urll)
     		ajax(urll,function(res){
                 console.log(res)
     			location.href = "shoppingcart.html";
     		})
		}
    })
</script>
